<template>
  <section>
    <el-button size="mini" type="primary" @click="addBtn">+</el-button>
    <el-row style="border: 0px solid crimson;margin-top: 20px;"><!--整一行-->
      <el-col :span="16" style="border: 0px solid green;background-color: #fff;width: 50%"><!--左边最外-->
        <!--左边-->
        <el-row style="margin-top: 100%"></el-row>
        <el-row style="position: absolute;top: 0;left: 0px;height: 100%;border:0px solid red;width: 50%">
          <el-row style="height: 100%">
            <el-row style="height: 70%;border: 0px solid red;width: 100%;">
              <el-col class="layout" :span="12" style="height: 100%;">
                <el-row class="imgbox" @click.native="checkCurrItem(0)">
                  <el-row :class="currIndex === 0?'imgcheck':'img'" >
                    <i class="el-icon-picture-outline" v-if="adPosition.ad[0].img === ''" style="border: 0px solid crimson;font-size: 50px"></i>
                    <img v-else :src='adPosition.ad[0].img' style="width: 100%;height: 100%"/>
                  </el-row>
                </el-row>
              </el-col>
              <el-col :span="12" style="height: 100%;">
                <el-row class="layout" style="height: 50%;">
                  <el-row class="imgbox" @click.native="checkCurrItem(1)">
                    <el-row :class="currIndex === 1?'imgcheck':'img'" >
                      <i class="el-icon-picture-outline" v-if="adPosition.ad[1].img === ''" style="border: 0px solid crimson;font-size: 50px"></i>
                      <img v-else :src='adPosition.ad[1].img' style="width: 100%;height: 100%"/>
                    </el-row>
                  </el-row>
                </el-row>
                <el-row class="layout" style="height: 50%;">
                  <el-row class="imgbox" @click.native="checkCurrItem(2)">
                    <el-row :class="currIndex === 2?'imgcheck':'img'" >
                      <i class="el-icon-picture-outline" v-if="adPosition.ad[2].img === ''" style="border: 0px solid crimson;font-size: 50px"></i>
                      <img v-else :src='adPosition.ad[2].img' style="width: 100%;height: 100%"/>
                    </el-row>
                  </el-row>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="height: 30%;border: 0px solid red;width: 100%;">
              <el-col class="layout" :span="12" style="height: 100%;">
                <el-row class="imgbox" @click.native="checkCurrItem(3)">
                  <el-row :class="currIndex === 3?'imgcheck':'img'" >
                    <i class="el-icon-picture-outline" v-if="adPosition.ad[3].img === ''" style="border: 0px solid crimson;font-size: 50px"></i>
                    <img v-else :src='adPosition.ad[3].img' style="width: 100%;height: 100%"/>
                  </el-row>
                </el-row>
              </el-col>
              <el-col class="layout" :span="12" style="height: 100%;">
                <el-row class="imgbox" @click.native="checkCurrItem(4)">
                  <el-row :class="currIndex === 4?'imgcheck':'img'" >
                    <i class="el-icon-picture-outline" v-if="adPosition.ad[4].img === ''" style="border: 0px solid crimson;font-size: 50px"></i>
                    <img v-else :src='adPosition.ad[4].img' style="width: 100%;height: 100%"/>
                  </el-row>
                </el-row>
              </el-col>
            </el-row>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12"  style="border: 0px solid green;padding: 5px 0">
        <!--右边-->
        <el-row v-if="currItem && currItem.id">
          <el-row style="width: 80%;margin: auto;margin-top: 10px;border: 1px solid #bbb;padding: 10px;border-radius: 10px">
            <el-button size="mini" type="text" @click="delItem">删除</el-button>
            <el-button size="mini" type="text" @click="editAdBtn">编辑</el-button>

          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </section>
</template>

<script>
  import setDetail from './setDetail'
  import uploadImg from  '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "primaryImagesAd",
    components:{uploadImg,setDetail},
    props:['adPosition'],
    data(){
      return {
        currItem:null,
        show:false,
        currIndex:0,
        imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548403371&di=cd270c605abaf2294bb3e5c6f7d49b2d&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F16%2F20121016131656_Qf3LM.jpeg'
      }
    },
    watch:{
      adPosition(nv,ov){
        if(nv){
          this.init()
        }
      }
    },
    created(){
      console.log('adPosition———主次图组的———————————————',this.adPosition)
      this.init()

    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        let tmp=5-this.adPosition.ad.length
        for(let i=0;i<tmp;i++){
          this.adPosition.ad.push({img:''})
        }
        this.currItem=this.adPosition.ad[0]
      },
      addBtn(){
      },
      checkCurrItem(index){
        console.log(index)
        this.currIndex=index
        this.currItem=this.adPosition.ad[index]
        if(this.currItem.id){
          // this.editAdBtn()
        }else {
          this.addBtn()
        }
      },
      addBtn(){
        this.$emit('newAd')
      },
      delItem(item){
        this.$emit('delAd',this.currItem)
      },
      editAdBtn(){
        this.$emit('editAd',this.currItem)
      },
    }
  }
</script>

<style scoped>
  .layout{
    /*width: 100%;*/
    border: 0px solid green;
    /*background-color:#fff*/
  }
  .imgbox{
    height: 100%;
    /*width: 90%;*/
    /*margin: auto;*/
    /*margin: 5px;*/
    padding: 5px;
  }
  .img{
    border: 1px solid #eee;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .imgcheck{
    /*background-color: #fff;*/
    border: 1px solid #eee;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 15px #3a3a3a;
    /*margin: 5px*/
  }
</style>
